import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, ActivityIndicator} from 'react-native';
import {base} from "../../../assets/style";
import { API } from "../../../api";
import { getLocalTime } from "../../../utils/utils";
import { txStateType } from "../../../config";
import {i18n} from "../../../utils/locales/i18n";

type Props = {};
export default class OrderItem extends Component<Props> {
    static navigationOptions = {
        header: null
    }
    constructor() {
        super()
        this.state = {
            loading: false,
            listData: [],
            isRefresh: false,
            // AdId: 18
            // BankName: "张俊生"
            // BankNumber: "6212252006001085148"
            // BuyToken: "fcc"
            // Created: 1545990097
            // Fee: 0
            // Id: 123
            // OrderNumber: "c18eb8d151144d3e"
            // ReferenceNumber: "771329"           // 参考号
            // SellToken: "hkd"
            // State: 3
            // Sum: 4.375       // 数量
            // Total: 49            // hkd金额
            // TxEndTime: 1545990997    // 时间
            // TxPartyId: 4
            // TxPartyName: "ldrtech"
            // TxStartTime: 1545990097
            // TxType: 2
            // Type: 1          1买单 2卖单
            // Uid: 17
            // Unit: 11.2    // 单价
        }
    }
    componentDidMount(): void {
        this._initList()
    }
    _initList = async () => {
        this.setState({
            loading: true
        })
        const res = await API._fetch('getOrderList', {}, 'GET')
        this.setState({
            loading: false
        })
        // AdId: 18
        // BankName: "张俊生"
        // BankNumber: "6212252006001085148"
        // BuyToken: "fcc"
        // Created: 1545990097
        // Fee: 0
        // Id: 123
        // OrderNumber: "c18eb8d151144d3e"
        // ReferenceNumber: "771329"           // 参考号
        // SellToken: "hkd"
        // State: 3            // 1进行中 2买房确认付款 3交易失败 4交易成功
        // Sum: 4.375       // 数量
        // Total: 49            // hkd金额
        // TxEndTime: 1545990997    // 时间
        // TxPartyId: 4
        // TxPartyName: "ldrtech"
        // TxStartTime: 1545990097
        // TxType: 2
        // Type: 1          1买单 2卖单
        // Uid: 17
        // Unit: 11.2    // 单价

        if (res.data && res.data.length <= 0) {
            // 没有数据
            this.setState({
                listData: [{
                    key: 'ewq',
                    type: -1
                }]
            })
            console.log('no data');
            return
        }
        const tempData = []
        // 0 全部 1买单 2卖单
        const type = this.props.type
        // 1进行中 2买房确认付款 3交易失败 4交易成功
        const state = this.props.state
        res.data.map(item => {
            item.key = item.OrderNumber
            item.type = 1
            if (type == 0) {
                if (state == item.State) {
                    tempData.push(item)
                }
            } else if (type == item.Type) {
                if (state == item.State) {
                    tempData.push(item)
                }
            // } else if (type ==2) {
            //     if (state == item.State) {
            //         tempData.push(item)
            //     }
            } else {
                console.log('unreconized order type!', item);
            }
        })
        if (tempData.length === 0) {
            this.setState({
                listData: [{
                    key: 'ewq',
                    type: -1
                }]
            })
            console.log('unreconized order type!', item);
            return
        }
        tempData.push({
            key: 'k',
            type: -2,
            text: i18n.t('i74')
        })
        this.setState({
            listData: tempData
        })
    }

    _onRefresh = async () => {
        await this._initList()
    }
    // 分发买单卖单
    dispatchOrder = (item) => {
        // Type: 1          1买单 2卖单
        if (item.Type === 1) {
            this.props.toBuy(item.OrderNumber)
        } else {
            this.props.toSell(item.OrderNumber)
        }
    }


    // type 0 全部 1 买单 2 卖单
    // state 0 进行中 1 已完成 2 已取消
    render() {
        return (
            <View style={styles.container}>
                { (this.state.loading && this.state.listData.length > 0) ? (
                        <View style={[base.flex_1, base.flex_col_center, base.bg_white]}>
                            <ActivityIndicator size="large" color="#ff7606" />
                            <View style={{paddingTop: 15}}>
                                <Text style={[base.color_orange]}>{i18n.t('loading')}</Text>
                            </View>
                        </View>
                    ) : (
                    <FlatList
                        data={this.state.listData}
                        onRefresh={() => this._onRefresh()}
                        refreshing={this.state.isRefresh}
                        renderItem={
                            ({item}) => {
                                if (item.type === -2) {
                                    return (
                                        <View style={{height: 50, width: '100%', backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
                                            <Text style={{color: '#808080'}}>{item.text}</Text>
                                        </View>
                                    )
                                }
                                if (item.type === -1) {
                                    return (
                                        <View style={{flex: 1, justifyContent: 'center', paddingTop: 50, alignItems: 'center'}}>
                                            <Image style={{width: 100, height: 90}} source={require('../../../images/order/empty-order.jpg')}/>
                                            <View style={{paddingTop: 20}}>
                                                <Text style={{color: '#ff7606'}}>{i18n.t('i75')}</Text>
                                            </View>
                                        </View>
                                    )
                                }
                                return (
                                    <TouchableOpacity onPress={() => this.dispatchOrder(item)} style={styles.itemContainer}>
                                        <View style={[styles.flex_row_between, { width: '100%', height: 40 }]}>
                                            <View style={[styles.flex_row_start]}>
                                                <View><Text style={{fontSize: 18}}>{ item.TxPartyName }</Text></View>
                                                { item.Type === 1 ? (
                                                    <View style={{borderWidth: 0, backgroundColor: '#68cf6f', paddingVertical: 3, paddingHorizontal: 5, marginLeft: 10}}>
                                                        <Text style={{color: '#fff', fontSize: 12}}>{i18n.t('i76')}FCC</Text>
                                                    </View>
                                                ) : (
                                                    <View style={{borderWidth: 0, backgroundColor: '#ff7606', paddingVertical: 3, paddingHorizontal: 5, marginLeft: 10}}>
                                                        <Text style={{color: '#fff', fontSize: 12}}>{i18n.t('sell')}FCC</Text>
                                                    </View>
                                                ) }
                                            </View>
                                            <View style={[styles.flex_row_end]}>
                                                <View><Image source={require('../../../images/order/unread.png')}/></View>
                                                <View style={{ marginLeft: 10 }}><Text style={{ fontSize: 16, color: '#ff7606' }}>{ txStateType[item.State] }</Text></View>
                                            </View>
                                        </View>
                                        <View style={{flex: 1, width: '100%', justifyContent: 'space-around'}}>
                                            <View style={[styles.flex_row_between]}>
                                                <View style={[styles.flex_row_start]}>
                                                    <Text style={[styles.itemText]}>{i18n.t('i77')}：</Text>
                                                    <Text style={[styles.itemText]}>{ getLocalTime(item.TxEndTime) }</Text>
                                                </View>
                                                <View style={[styles.flex_row_end]}>
                                                    <Text style={[styles.itemText]}>{ item.Total }</Text>
                                                    <Text style={[styles.itemText]}> HKD</Text>
                                                </View>
                                            </View>
                                            <View style={[styles.flex_row_between]}>
                                                <View style={[styles.flex_row_start]}>
                                                    <Text style={[styles.itemText]}>{i18n.t('i78')}：</Text>
                                                    <Text style={[styles.itemText]}>{ item.Unit } HKD</Text>
                                                </View>
                                                <View>
                                                    <Text style={[styles.itemText]}>{i18n.t('i79')}</Text>
                                                </View>
                                            </View>
                                            <View style={[styles.flex_row_start]}>
                                                <View style={[styles.flex_row_start]}>
                                                    <Text style={[styles.itemText]}>{i18n.t('i80')}：</Text>
                                                    <Text style={[styles.itemText]}>{item.Sum} FCC</Text>
                                                </View>
                                            </View>
                                            <View style={[styles.flex_row_start]}>
                                                <View style={[styles.flex_row_start]}>
                                                    <Text style={[styles.itemText]}>{i18n.t('i81')}：</Text>
                                                    <Text style={[styles.itemText]}>{ item.ReferenceNumber }</Text>
                                                </View>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        }
                    />
                ) }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        // backgroundColor: '#fff',
        flex: 1
    },
    itemContainer: {
        fontSize: 20,
        height: 150,
        width: '100%',
        backgroundColor: '#fff',
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        padding: 10,
        flexDirection: 'column'
    },
    itemText: {
        color: '#808080'
    },
    flex_row_between: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    flex_row_start: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    flex_row_end: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center'
    }
});
